import React from 'react';
import { Card, CardContent, Typography, Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';
import { SaleHistoryAPI, TaxHistoryAPI } from 'types';


interface SaleTaxHistoryCardProps {
    saleHistory?: SaleHistoryAPI[];
    taxInfo: TaxHistoryAPI;
}

const SaleTaxHistoryCard: React.FC<SaleTaxHistoryCardProps> = ({ saleHistory, taxInfo }) => {
    return (
        <Card>
            <CardContent>
                <Typography variant="h6" gutterBottom>
                    Sale & Tax History
                </Typography>
                
                {/* Sale History Table */}
                <Box mb={4}>
                    <Typography variant="subtitle1" sx={{ fontWeight: 'bold', mb: 1 }}>
                        Sale History
                    </Typography>
                    {saleHistory && saleHistory.length > 0 ? (
                        <TableContainer component={Paper} sx={{ boxShadow: 0 }}>
                            <Table size="small">
                                <TableHead>
                                    <TableRow>
                                        <TableCell>Sale Date</TableCell>
                                        <TableCell>Sale Amount</TableCell>
                                    </TableRow>
                                </TableHead>
                                <TableBody>
                                    {saleHistory.map((item) => (
                                        <TableRow key={item.seq_no}>
                                            <TableCell>{item.sale_date}</TableCell>
                                            <TableCell>${item.sale_amount.toLocaleString()}</TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        </TableContainer>
                    ) : (
                        <Typography variant="body2" color="text.secondary">
                            No recent sale history available.
                        </Typography>
                    )}
                </Box>
                
                {/* Tax History Table */}
                <Box>
                    <Typography variant="subtitle1" sx={{ fontWeight: 'bold', mb: 1 }}>
                        Latest Tax Info
                    </Typography>
                    {taxInfo ? (
                        <TableContainer component={Paper} sx={{ boxShadow: 0 }}>
                            <Table size="small">
                                <TableHead>
                                    <TableRow>
                                        <TableCell>Year</TableCell>
                                        <TableCell>Assessed Value</TableCell>
                                        <TableCell>Tax Amount</TableCell>
                                    </TableRow>
                                </TableHead>
                                <TableBody>
                                    <TableRow>
                                        <TableCell>{taxInfo.year}</TableCell>
                                        <TableCell>${taxInfo.assessed_value.toLocaleString()}</TableCell>
                                        <TableCell>${taxInfo.tax_amount.toLocaleString()}</TableCell>
                                    </TableRow>
                                </TableBody>
                            </Table>
                        </TableContainer>
                    ) : (
                        <Typography variant="body2" color="text.secondary">
                            No tax information available.
                        </Typography>
                    )}
                </Box>
            </CardContent>
        </Card>
    );
};

export default SaleTaxHistoryCard;